<template>
  <el-scrollbar>
    <div class="app-container">
      <div class="filter-container" size="small">
        <el-select
          v-model="listQuery.type"
          :placeholder="$t('buyer.supplier')"
          @change="search"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="listQuery.title"
          size="small"
          :placeholder="$t('common.title')"
          style="width: 200px"
          class="input-with-select"
          clearable
        >
        </el-input>
        <el-button
          class="filter-item"
          size="small"
          icon="el-icon-search"
          type="primary"
          plain
          @click="search"
        >
          {{ $t('table.search') }}
        </el-button>
        <el-button
          size="small"
          class="filter-item right"
          icon="el-icon-refresh"
          type="primary"
          plain
          @click="refresh()"
        >
          {{ $t('common.refresh') }}
        </el-button>
      </div>

      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        :height="
          listQuery.total > 0 ? 'calc(100vh - 205px)' : 'calc(100vh - 170px)'
        "
        :header-cell-style="{ background: '#F2F6FC' }"
        element-loading-text="Loading"
        fit
        border
        size="medium"
      >
        <el-table-column
          align="center"
          :label="$t('common.id')"
          width="50"
          type="index"
        />
        <el-table-column
          :label="$t('common.title')"
          prop="title"
          align="left"
        />
        <el-table-column
          :label="$t('buyer.details')"
          prop="details"
          align="left"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div style="white-space: pre-line" v-html="scope.row.details"></div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.nation')"
          prop="country"
          overflow="hidden"
          white-space="nowrap"
          align="center"
        />
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('common.actions')"
          width="160"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              plain
              icon="el-icon-view"
              @click="view(scope.row)"
              >{{ $t('common.view') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <pagination
        v-show="listQuery.total > 0"
        :total="listQuery.total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
      <!-- <Info :rowData="rowData" :show.sync="showViewState" @closeAction="closeAction"/> -->
      <Info1
        :rowData="rowData"
        :show.sync="showViewState"
        @closeAction="closeAction"
      />
    </div>
  </el-scrollbar>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getAction } from '@/api/common'
import Info from './info.vue'
import Info1 from './info1.vue'

export default {
  name: 'index',
  components: {
    Pagination,
    Info,
    Info1,
  },
  data() {
    return {
      listLoading: true,
      list: [],
      rowData: {},
      showViewState: false,
      typeOptions: [
        {
          value: 1,
          label: this.$t('buyer.globalSupplier'),
        },
        {
          value: 2,
          label: this.$t('buyer.internalSupplier'),
        },
      ],
      // 列表搜索条件
      listQuery: {
        page: 1,
        total: 0,
        limit: 20,
        title: '', //买家搜索的关键字
        type: 1, //表示买家搜索的类型 1 国外 ; 2 国内
      },
    }
  },
  created() {
    if (this.$route.query.type > 0) {
      let title = this.$route.query.value
      let type = this.$route.query.type
      this.listQuery.title = title
      this.listQuery.type = type
      this.$router.push({ query: {} })
      //清除query
    }
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const { data } = await getAction(this.listQuery, 'buyerData/BuyerIndex')
      this.list = data.items
      this.listQuery.total = data.total
      this.listLoading = false
    },
    search() {
      this.listQuery.page = 1
      this.fetchData()
    },
    refresh() {
      this.fetchData()
    },
    view(rowData) {
      this.rowData = Object.assign({}, rowData) // 拷贝对象，否则会影响到row
      this.showViewState = true
    },
    closeAction() {
      this.showViewState = false
      this.fetchData()
    },
  },
}
</script>

<style scoped></style>
